<script lang='ts' setup>
import { ref, Ref, reactive } from 'vue'
import userBeanServiceApi from '/@/api/org/bean/user-bean'
import { disabledBeforeToday } from '/@/utils/date'
//定义事件
const emit = defineEmits<{
    (e: 'add-success', data: any, res: any): void//保存成功回调
}>()

//定义属性
const props = defineProps({
    /**主键值 */
    userId: String,
    /**部门id */
    unitId: String,
})

//model-form ref对象
const JxtechModelFormRef = ref();

//校验用户密码
const validateUserPassword = (rule: any, value: string, callback: Function) => {
    //密码必须为 大小写字母 以及数字三种情况组合 长度为8-15
    let reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,15}$/;
    if (value === '') {
        callback(new Error('请输入密码'))
    } else {
        if (reg.test(value)) {
            if (UserFormData.value.rePassword !== '') {
                JxtechModelFormRef.value.validateField('rePassword')
            }
            callback()
        } else {
            callback(new Error('用户密码必须由大写，小写字母以及数字三种字符组成，且长度为8-15之间'))
        }
    }
}
//检验确认密码
const validatereRePassword = (rule: any, value: string, callback: Function) => {
    let reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,15}$/;
    if (value === '') {
        callback(new Error('请输入确认密码'))
    } else if (value !== UserFormData.value.userPassword) {
        callback(new Error("两次输入的密码不匹配"))
    } else if (!reg.test(value)) {
        callback(new Error("用户密码必须由大写，小写字母以及数字三种字符组成，且长度为8-15之间"))
    } else {
        callback()
    }
}

//定义必填校验规则
const rules = {
    userAccount: [{ required: true, message: '请输入用户账号', trigger: 'blur' }],
    userFullname: [{ required: true, message: '请输入用户名称', trigger: 'blur' }],
    userPassword: [{ validator: validateUserPassword, trigger: 'blur' }],
    rePassword: [{ validator: validatereRePassword, trigger: 'blur' }],
}

//表单数据
const UserFormData: Ref<any> = ref({
    userId: props.userId,
    userPassword: '',
    rePassword: ''
})



//组件对象
const UserFormState = reactive({
    primaryKey: 'userId',
    formStatus: null,
    getJxtechModelFormExpose: (): ModelFormExpose => {
        return JxtechModelFormRef.value as ModelFormExpose
    },
    /**新增成功 */
    onAddSuccess: (formData: any, res: any) => {
        emit("add-success", formData, res)
    },
    disabledDate: (date: Date) => {
        return disabledBeforeToday(date);
    },
    newBeanFunction: () => {
        return userBeanServiceApi.add({ unitId: props.unitId });
    },
    saveInsertFunction: (formData: any) => {
        return userBeanServiceApi.saveInsert(formData, { unitId: props.unitId })
    }
})

//对外提供方法
defineExpose({
    save: () => JxtechModelFormRef.value.save()
})

</script>
<template>
    <jxtech-model-form
        ref="JxtechModelFormRef"
        v-model:formStatus="UserFormState.formStatus"
        :new-bean-function="UserFormState.newBeanFunction"
        :save-insert-function="UserFormState.saveInsertFunction"
        :service-api="userBeanServiceApi"
        :primary-key="UserFormState.primaryKey"
        :form-data="UserFormData"
        :rules="rules"
        @add-success="UserFormState.onAddSuccess"
    >
        <el-row>
            <el-col :span="21" :offset="1">
                <el-row :gutter="24">
                    <el-col :span="12">
                        <jxtech-model-form-item label="用户账号" prop="userAccount">
                            <el-input placeholder="请输入用户账号" v-model="UserFormData.userAccount"></el-input>
                        </jxtech-model-form-item>
                    </el-col>
                    <el-col :span="12">
                        <jxtech-model-form-item label="用户名称" prop="userFullname">
                            <el-input placeholder="请输入用户名称" v-model="UserFormData.userFullname"></el-input>
                        </jxtech-model-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24" v-if="UserFormState.formStatus == 'add'">
                    <el-col :span="12">
                        <jxtech-model-form-item label="密码" prop="userPassword">
                            <el-input placeholder="请输入密码" v-model="UserFormData.userPassword"></el-input>
                        </jxtech-model-form-item>
                    </el-col>
                    <el-col :span="12">
                        <jxtech-model-form-item label="确认密码" prop="rePassword">
                            <el-input placeholder="请输入确认密码" v-model="UserFormData.rePassword"></el-input>
                        </jxtech-model-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="12">
                        <jxtech-model-form-item label="工号" prop="userNo">
                            <el-input placeholder="请输入工号" v-model="UserFormData.userNo"></el-input>
                        </jxtech-model-form-item>
                    </el-col>
                    <el-col :span="12">
                        <jxtech-model-form-item label="性别" prop="userSex">
                            <jxtech-dictionary-select
                                placeholder="请选择性别"
                                codeItemId="USER_SEX"
                                v-model="UserFormData.userSex"
                            ></jxtech-dictionary-select>
                        </jxtech-model-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="12">
                        <jxtech-model-form-item label="手机" prop="userMobile">
                            <el-input placeholder="请输入手机" v-model="UserFormData.userMobile"></el-input>
                        </jxtech-model-form-item>
                    </el-col>
                    <el-col :span="12">
                        <jxtech-model-form-item label="邮箱" prop="userEmail">
                            <el-input placeholder="请输入邮箱" v-model="UserFormData.userEmail"></el-input>
                        </jxtech-model-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="12">
                        <jxtech-model-form-item label="是否有效" prop="valid">
                            <el-radio-group v-model="UserFormData.valid">
                                <el-radio :label="true">有效</el-radio>
                                <el-radio :label="false">无效</el-radio>
                            </el-radio-group>
                        </jxtech-model-form-item>
                    </el-col>
                    <el-col :span="12">
                        <jxtech-model-form-item label="是否锁定" prop="userAccountLocked">
                            <el-radio-group v-model="UserFormData.userAccountLocked">
                                <el-radio :label="true">锁定</el-radio>
                                <el-radio :label="false">正常</el-radio>
                            </el-radio-group>
                        </jxtech-model-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="12">
                        <jxtech-model-form-item label="离职时间" prop="userDisabledDate">
                            <el-date-picker
                                v-model="UserFormData.userDisabledDate"
                                type="date"
                                placeholder="请选择离职时间"
                                :disabled-date="UserFormState.disabledDate"
                            ></el-date-picker>
                        </jxtech-model-form-item>
                    </el-col>
                    <el-col :span="12">
                        <jxtech-model-form-item label="上级领导" prop="superiorLeader">
                            <el-input placeholder="请输入上级领导" v-model="UserFormData.superiorLeader"></el-input>
                        </jxtech-model-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="24">
                        <jxtech-model-form-item label="描述" prop="userDescription">
                            <el-input
                                v-model="UserFormData.userDescription"
                                :rows="3"
                                type="textarea"
                                show-word-limit
                                maxlength="255"
                            ></el-input>
                        </jxtech-model-form-item>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </jxtech-model-form>
</template>